import { Popover } from '@mui/material';
import { format } from 'date-fns';
import ReactCalendar from 'react-calendar';
import { useTranslation } from 'react-i18next';
import style from './Calendar.module.scss';

type Props = {
  open: boolean;
  onClose: () => void;
  anchorEl?: Element | null;
  value: Date;
  onChange: (v: Date) => void;
  onClear?: () => void;
};

const Calendar = ({ open, onClose, anchorEl, value, onChange, onClear }: Props) => {
  const { t } = useTranslation();

  return (
    <Popover
      open={open}
      onClose={onClose}
      anchorEl={anchorEl}
      anchorOrigin={{
        vertical: 40,
        horizontal: 'left',
      }}
      className={style.popover}
    >
      <div className={style.block}>
        <div className={style.year}>{format(value, 'yyyy')}</div>
        <div className={style.date}>{format(value, 'E, MMMM d')}</div>
        {onClear && (
          <div className={style.clear} onClick={onClear}>
            清除
          </div>
        )}
      </div>
      <ReactCalendar locale="en-US" defaultValue={value} onChange={onChange} />
    </Popover>
  );
};

export default Calendar;
